<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <title>ZUCCmap</title>
</head>

<body>
    <div id="mian" style="width:600px;height: 700px;margin: 0 auto"></div>
    <script src="EchartsAssess/zuccmap.js"></script>
    <script>
        $(function () {
            var myChart = echarts.init(document.getElementById('mian'));
            // console.log(geojson);
            // console.log(zuccdata);
            echarts.registerMap('zuccgeo', geojson);

            var option = {
                tooltip: { // 图中每个小item的格式话显示效果
                    trigger: 'item',
                    formatter: '区域名称：<br/>{b}'
                },
                visualMap: { // 视觉映射
                    min: 500,
                    max: 38000,
                    text: ['High', 'Low'],
                    left: 'right',
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#b4b4b4', '#19b401', '#03eaff', '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                series: [
                    {
                        name: 'zuccmap',
                        type: 'map',
                        mapType: 'zuccgeo', // 自己注册或者内置的地图
                        aspectScale: 1,  	// 地图长度比
                        roam: true, 		// 是否允许缩放
                        zoom: 2,			// 初始缩放
                        scaleLimit: {
                            min: 0.5,
                            max: 10,
                        },
                        label: {
                            normal: {   // 普通状态
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            emphasis: { // 鼠标悬浮的状态
                                show: true,
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        },
                        data: zuccdata  // 地图中每个item的数值
                    },
                ]
            };
            myChart.setOption(option);
        })
    </script>
</body>

</html>